<template>
    <div class="select-car-plate">
        <ul class="plate-input-list">
            <template v-for="(item,key) in catPlateInput">
                <li :key="key" @click="setIndex(key)">
                    <div class="number" :class="{'active':nowInputIndex===key}">{{catPlateInput[key]}}</div>
                </li>
            </template>
        </ul>
        <div class="type-select">
            <label><input type="radio" v-model="plateType" @change="plateTypeChange" value="normal"/>燃油车</label>
            <label><input type="radio" v-model="plateType" @change="plateTypeChange" value="newEnergy"/>新能源</label>
            <label><input type="radio" v-model="plateType" @change="plateTypeChange" value="tricycle"/>三轮车</label>
        </div>
        <div class="commit-button">
            <button :disabled="cannotCommit()" @click="commit">确定</button>
        </div>
        <common-keyboard v-model="plateSelectInput" :keys="keys[plateType][nowInputIndex]"></common-keyboard>
    </div>
</template>

<script>
    import CommonKeyboard from "./Keyboard";

    export default {
        name: 'StlswmCarNumberSelector',
        components: {CommonKeyboard},
        props: {
            value: {
                type: String,
            }
        },
        data() {
            return {
                //normal:普通车牌（7位）
                //newEnergy:新能源车牌（8位）
                //tricycle:三轮车（6位、开头只能是三）
                plateType: 'normal',
                nowInputIndex: 0,
                catPlateInput: [],
                keys: {
                    normal: [
                        [
                            ['京', '津', '冀', '鲁', '晋', '蒙', '辽', '吉', '黑'],
                            ['苏', '浙', '皖', '闽', '赣', '豫', '鄂', '湘', '粤'],
                            ['渝', '川', '贵', '云', '藏', '陕', '甘', '青', '沪'],
                            ['琼', '新', '港', '澳', '台', '宁', '桂'],
                        ],
                        [
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', '←'],
                            ['H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领'],
                        ],
                    ],
                    newEnergy: [
                        [
                            ['京', '津', '冀', '鲁', '晋', '蒙', '辽', '吉', '黑'],
                            ['苏', '浙', '皖', '闽', '赣', '豫', '鄂', '湘', '粤'],
                            ['渝', '川', '贵', '云', '藏', '陕', '甘', '青', '沪'],
                            ['琼', '新', '港', '澳', '台', '宁', '桂'],
                        ],
                        [
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', '←'],
                            ['H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领'],
                        ],
                        [
                            ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '←'],
                            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                            ['J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R'],
                            ['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '学', '领'],
                        ],
                    ],
                    tricycle: [
                        [
                            ['三'],
                        ],
                        [
                            ['0', '1', '2', '3', '4'],
                            ['5', '6', '7', '8', '9', '←'],
                        ],
                        [
                            ['0', '1', '2', '3', '4'],
                            ['5', '6', '7', '8', '9', '←'],
                        ],
                        [
                            ['0', '1', '2', '3', '4'],
                            ['5', '6', '7', '8', '9', '←'],
                        ],
                        [
                            ['0', '1', '2', '3', '4'],
                            ['5', '6', '7', '8', '9', '←'],
                        ],
                        [
                            ['0', '1', '2', '3', '4'],
                            ['5', '6', '7', '8', '9', '←'],
                        ],
                    ],
                },
            };
        },
        methods: {
            plateTypeChange(type, noClear) {
                let length = 0;
                let tmpArr = [];
                switch (this.plateType) {
                    case 'normal':
                        length = 7;
                        break;
                    case 'newEnergy':
                        length = 8;
                        break;
                    case 'tricycle':
                        length = 6;
                        break;
                }
                if (this.nowInputIndex >= length) {
                    this.nowInputIndex = length - 1;
                }
                for (let i = 0; i < length; i++) {
                    if (noClear) {
                        let oldValue = this.catPlateInput[i];
                        if (oldValue) {
                            this.nowInputIndex = i;
                            tmpArr.push(oldValue);
                        } else {
                            tmpArr.push('');
                        }
                    } else {
                        this.nowInputIndex = 0;
                        tmpArr.push('');
                    }
                }
                if (this.plateType === 'tricycle') {
                    tmpArr[0] = '三';
                    if (this.nowInputIndex === 0) {
                        this.nowInputIndex = 1;
                    }
                }
                this.catPlateInput = tmpArr;
            },
            //不能提交
            cannotCommit() {
                for (let i in this.catPlateInput) {
                    if (this.catPlateInput[i] === "") {
                        //有位置没有输入不能提交
                        return true;
                    }
                }
                return false;
            },
            commit() {
                this.$emit('select', this.catPlateInput.join(''));
            },
            setIndex(index) {
                this.nowInputIndex = index;
            }
        },
        mounted() {
            this.catPlateInput = this.value.split('');
            if (this.catPlateInput.length === 8) {
                this.plateType = 'newEnergy';
            } else if (this.catPlateInput[0] === '三') {
                this.plateType = 'tricycle';
            } else {
                this.plateType = 'normal';
            }
            this.plateTypeChange(this.plateType, true);
        },
        computed: {
            plateSelectInput: {
                get() {
                    return '';
                },
                set(newValue) {
                    if (newValue === "←") {
                        this.$set(this.catPlateInput, this.nowInputIndex, '');
                        if (this.nowInputIndex > 0) {
                            this.nowInputIndex--
                        }
                    } else {
                        this.$set(this.catPlateInput, this.nowInputIndex, newValue);
                        if (this.nowInputIndex < this.catPlateInput.length - 1) {
                            this.nowInputIndex++
                        }
                    }
                },
            }
        },
    }
</script>


<style scoped>

    .plate-input-list {
        padding: 20px 10px 0 10px;
        display: flex;
        justify-content: space-between;
    }

    .plate-input-list > li {
    }

    .plate-input-list > li .number {
        width: 36px;
        height: 40px;
        line-height: 40px;
        border: none;
        background: #dedede;
        color: transparent;
        text-shadow: 0 0 0 #000;
        text-align: center;
    }

    .plate-input-list > li .number.active {
        border: 1px solid #198fff;
    }

    .type-select {
        text-align: left;
        padding: 10px;
        display: flex;
        justify-content: space-between
    }

    .commit-button {
        padding: 10px;
    }

    .commit-button > button {
        display: block;
        width: 100%;
        height: 40px;
        background: #07c160;
        border: none;
        color: white;
        font-size: 14px;
    }

    .commit-button > button:disabled {
        background: #b2b2b2;
    }
</style>
